<template>
  <div class="login-container flex justify-center align-center">
    <el-form ref="loginFormRef" class="login-form">
      <h3 class="title">登录中心</h3>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="登录" name="login">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="loginForm.sta" class="ml-4">
                <el-radio :label="1" size="large">用户</el-radio>
                <el-radio :label="0" size="large">管理员</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
              @click="handleLogin()"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="注册" name="zhuce">
          <el-form-item prop="username">
            <el-input
              v-model="regForm.username"
              type="text"
              auto-complete="off"
              placeholder="账号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="regForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="regForm.phone"
              auto-complete="off"
              placeholder="手机号"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              type="primary"
              style="width: 100%"
              @click="handleLogin()"
            >
              <span v-if="!loading">注册并登录</span>
              <span v-else>登 录 中...</span>
            </el-button>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import router from "@/router";
import { login, register } from "@/api";
import { setToken } from "@/utils/auth";
import { Try } from "@/utils";
import useUser from "@/store/user";
const userStore = useUser();
const activeName = ref("login");
const loginFormRef = ref();
const loading = ref(false);
const loginForm = reactive({
  username: "",
  password: "",
  sta: 1,
});
const regForm = reactive({
  username: "",
  password: "",
  phone: "",
});
function handleLogin() {
  Try(async () => {
    if (activeName.value === "login") {
      const res = await login(loginForm);
      console.log(res);
      if (res.code === 200) {
        ElMessage.success(res.message);
        userStore.setUserInfo(res.data);
        if (loginForm.sta == 1) {
          router.go(-1);
        } else {
          router.push("/admin");
          setToken(res.token);
        }
      } else {
        ElMessage.error(res.message);
      }
    } else {
      const res = await register(regForm);
      if (res.code === 200) {
        ElMessage.success(res.message);
      } else {
        ElMessage.error(res.message);
      }
    }
  });
}
</script>

<style scoped>
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: center/cover url("../assets/login.png");
}
.login-form {
  position: absolute;
  z-index: 2023;
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
  font-weight: bold;
  font-size: 30px;
}

.login-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.el-form-item {
  margin-top: 10px !important;
}
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: center/cover url("../assets/login.png");
}
</style>
